<template>
  <div class="h-full overflow-auto">
    <div
      class="w-full h-108px bg-white rounded-16px p-18px box-border flex flex-row items-center hover:shadow-sm"
    >
      <div class="relative w-72px h-72px">
        <div class="ant-image" style="width: 72px; height: 72px">
          <img
            class="ant-image-img w-72px h-72px group-hover:scale-103 transition rounded-[50%] object-cover"
            :src="userInfo?.header_img"
            style="height: 72px"
          />
        </div>
      </div>
      <div class="ml-16px flex flex-col h-72px">
        <div class="mt-2px h-20px flex flex-row items-center">
          <h1 class="text-20px font-bold text-#333333 leading-20px">{{ userInfo?.nick_name }}</h1>
        </div>
        <div class="mt-8px h-16px flex flex-row items-center">
          <div
            class="h-16px bg-#70C6FF rounded-8px px-4px box-border flex flex-row items-center"
            v-show="userInfo.birthday"
          >
            <img src="@/assets/men.png" alt="girl" class="w-12px h-12px" />
            <div class="ml-3px text-12px text-white">
              {{ dayjs().year() - dayjs(userInfo.birthday).year() }}
            </div>
          </div>
          <div
            class="ml-6px h-16px bg-#16D6B5 rounded-8px px-6px box-border flex flex-row items-center"
          >
            <div class="w-4px h-4px rounded-[50%] bg-white"></div>
            <div class="ml-4px text-12px text-white">在线</div>
          </div>
        </div>
        <div class="mt-9px flex flex-row items-center">
          <img src="@/assets/id.png" alt="no" class="w-24px h-15px" />
          <div class="ml-4px text-14px text-#8A8C99">{{ userInfo?.user_id }}</div>
          <button id="copy" class="ml-4px">
            <img src="@/assets/copy.png" alt="copy" class="w-14px h-14px cursor-pointer" />
          </button>
        </div>
      </div>
      <div class="flex-1"></div>
      <!-- <button
        class="w-40px h-40px bg-white border border-#E6E6E6 rounded-12px flex justify-center items-center"
      >
        <img src="@/assets/message.png" alt="" class="w-16px h-16px" /></button
      ><button
        class="ml-16px h-40px bg-white border border-#E6E6E6 rounded-12px flex flex-row items-center px-20px box-border"
      >
        <img src="@/assets/share.png" alt="" class="w-16px h-16px" />
        <div class="ml-4px text-14px text-#242633">分享</div>
      </button>
      <button class="h-40px px-20px rounded-12px bg-#1CB3FF flex flex-row items-center ml-16px">
        <img src="@/assets/follow.png" alt="" class="w-16px h-16px" />
        <div class="ml-4px text-16px text-white">关注</div>
      </button> -->
    </div>
    <div class="mt-12px w-full px-18px py-24px box-border flex flex-col bg-white rounded-16px">
      <div class="flex flex-row h-24px">
        <img src="@/assets/game-info.png" alt="" class="w-24px h-24px" />
        <h2 class="ml-6px h-24px leading-24px text-24px font-bold text-#333333">游戏信息</h2>
      </div>
      <div
        class="mt-16px flex flex-col w-full h-[fit-content] p-18px box-border rounded-16px bg-gradient-to-r from-#F5F5F5"
      >
        <div class="mt-12px w-full text-14px leading-20px text-#525566 break-all">
          {{ selectSkill?.game_info }}
        </div>
      </div>
      <div class="mt-18px w-453px h-253px rounded-16px overflow-hidden">
        <div class="ant-image" style="width: 453px; height: 253px">
          <img
            class="ant-image-img w-453px h-253px object-cover"
            :src="selectSkill?.screenshots"
            style="height: 253px"
          />
        </div>
      </div>
      <div
        class="mt-18px flex flex-col w-full h-[fit-content] p-18px box-border bg-gradient-to-r from-#F5F5F5 rounded-12px"
      >
        <div class="flex flex-row items-center">
          <img src="@/assets/level.png" alt="level" class="w-20px h-20px" />
          <div class="ml-8px text-14px text-#525566">
            等级: <span class="text-#999999">{{ selectSkill?.rank?.name }}</span>
          </div>
        </div>
        <div class="mt-16px flex flex-row items-center">
          <img src="@/assets/shouxuan.png" alt="level" class="w-20px h-20px" />
          <div class="ml-8px text-14px text-#525566">
            首选角色:
            <span class="text-#999999">{{
              selectSkill?.game_position?.map((item) => item?.name).join('、')
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-20px">
      <OrderCard :data="orderInfo" />
    </div>
    <div class="flex my-20px">
      <!-- 陪玩师取消订单 -->
      <button
        v-if="isMyOrder && !isFinished"
        class="mr-13px w-220px h-54px rounded-27px bg-gradient-to-r from-[#999] to-[#aaa] flex flex-row justify-center items-center transition-all hover:shadow-lg"
        @click="handleCancel"
      >
        <div class="ml-7px text-20px font-bold text-white">取消订单</div>
      </button>
      <!-- 用户申请取消订单 -->
      <button
        v-if="isMyBuyOrder && !isCanceling && !isFinished"
        class="mr-13px w-220px h-54px rounded-27px bg-gradient-to-r from-[#999] to-[#aaa] flex flex-row justify-center items-center transition-all hover:shadow-lg"
        @click="handleApplyCancel"
      >
        <div class="ml-7px text-20px font-bold text-white">取消订单</div>
      </button>
      <!-- 用户完成订单 -->
      <button
        v-if="isMyBuyOrder && !isCanceling && !isFinished"
        class="w-220px h-54px rounded-27px bg-gradient-to-r from-#7733FF to-#FF4DC4 flex flex-row justify-center items-center transition-all hover:shadow-lg"
        @click="handleOk"
      >
        <div class="ml-7px text-20px font-bold text-white">完成订单</div>
      </button>
      <!-- 用户完成订单后评价订单 -->
      <button
        v-if="isMyBuyOrder && isFinished && !orderInfo.is_comment"
        class="w-220px h-54px rounded-27px bg-gradient-to-r from-#7733FF to-#FF4DC4 flex flex-row justify-center items-center transition-all hover:shadow-lg"
        @click="handleComment"
      >
        <div class="ml-7px text-20px font-bold text-white">评价订单</div>
      </button>
      <button
        v-if="isMyBuyOrder && orderInfo.is_comment"
        class="mr-13px w-220px h-54px rounded-27px bg-gradient-to-r from-[#999] to-[#aaa] flex flex-row justify-center items-center transition-all hover:shadow-lg"
      >
        <div class="ml-7px text-20px font-bold text-white">已评价</div>
      </button>
    </div>
  </div>
  <Comment v-model:visible="commentVisible" :info="orderInfo" @submit="handleCommentSubmit" />
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import OrderCard from '@/views/info/order/list/components/order-card.vue'
import { getOrderDetail, cancelOrder, finishOrder, applyCancelOrder } from '@/api/order'
import dayjs from 'dayjs'
import { useUserStore } from '@/store'
import { Message } from '@arco-design/web-vue'
import Comment from './components/comment.vue'
import STATUS_ENUM from './statusEnum'
const userStore = useUserStore()
const commentVisible = ref(false)
const route = useRoute()
const orderId = ref(route.params.id)
const orderInfo = ref({})

const selectSkill = computed(() => orderInfo.value?.skill || {})
const userInfo = computed(() => orderInfo.value?.user?.userInfo || {})
const isMyBuyOrder = computed(() => {
  return orderInfo.value?.buy_id === userStore.userInfo?.user_id
})

const isCanceling = computed(() => orderInfo.value?.status === STATUS_ENUM.OrderStatusCanceling)
const isFinished = computed(() => {
  return (
    orderInfo.value?.status === STATUS_ENUM.OrderStatusFinish ||
    orderInfo.value?.status === STATUS_ENUM.OrderStatusCancelFinishByBuyer ||
    orderInfo.value?.status === STATUS_ENUM.OrderStatusCancelFinishByUser
  )
})
const handleComment = () => {
  commentVisible.value = true
}
const handleCommentSubmit = () => {
  commentVisible.value = false
  orderInfo.value.is_comment = true
}
//只有陪玩师能取消订单
const isMyOrder = computed(() => {
  return orderInfo.value?.user_id === userStore.userInfo?.user_id
})

const handleApplyCancel = () => {
  applyCancelOrder(orderId.value).then(() => {
    Message.success('申请取消订单成功')
    orderInfo.value.status = STATUS_ENUM.OrderStatusCanceling
  })
}
const handleCancel = () => {
  cancelOrder(orderId.value).then((res) => {
    Message.success('取消订单成功')
    orderInfo.value.status = res
  })
}
const handleOk = () => {
  finishOrder(orderId.value).then(() => {
    Message.success('完成订单成功')
    orderInfo.value.status = STATUS_ENUM.OrderStatusFinish
  })
}
onMounted(() => {
  getOrderDetail(orderId.value).then((res) => {
    orderInfo.value = res
  })
})
</script>
<style lang="less" scoped></style>
